<template>
  <div class="main">
    <el-container style="height: 100%">
      <el-aside width="300px">
        <!-- <router-link :to="{name:'Basic'}">基本信息</router-link>-->
        <!-- <router-link :to="{name:'Auth'}">实名认证</router-link>-->
        <el-scollbar>
          <el-menu default-active="4" :router="true">
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <Location/>
                </el-icon>
                <span>Navigator One</span>
              </template>

              <el-menu-item index="1-1" :route="{name:'Basic'}">item one</el-menu-item>
              <el-menu-item index="1-2" :route="{name:'Auth'}">item two</el-menu-item>

            </el-sub-menu>
            <el-menu-item index="2" :route="{name:'Basic'}">
              <el-icon>
                <IconMenu/>
              </el-icon>
              <span>Navigator Two</span>
            </el-menu-item>
            <el-menu-item index="3" :route="{name:'Auth'}">
              <el-icon>
                <Document/>
              </el-icon>
              <span>Navigator Three</span>
            </el-menu-item>
            <el-menu-item index="4">
              <el-icon>
                <Setting/>
              </el-icon>
              <span>Navigator Four</span>
            </el-menu-item>

          </el-menu>
        </el-scollbar>

      </el-aside>
      <el-main class="body">
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import {Document, Menu as IconMenu, Location, Setting,} from '@element-plus/icons-vue'

</script>

<style scoped>
.el-menu {
  border-right: 0;
}

.main {
  height: calc(100vh - 72px);
}

.body {
  background-color: #f5f5f5;
}
</style>
